vue基础
// 用于构建用户界面的渐进式js框架
// 采用组件化模式 声明式编码 虚拟DOM

在html内使用引入js链接

    创建vue实例
    // 想要Vue工作必须创建一个Vue实例
    // HTML root 容器混入一些特殊的Vue用法  <h1>hello {{name}}<h1>
        new Vue ({
            // 挂载        
            el: '#root', 
            // data中用于存储数据供el所指定的容器去使用
            data: {
                name: 'xianxx'
            }
        })
        // 容器和实例之间只能一一对应

    插值语法指令语法
        // 插值语法解析标签体内容
        // 指令语法用于解析标签
        /* 
            <div class = 'root'>你好，{{name}}
            <a :href ="url" >点我去下一个网站</a>  v-bind: 绑定的意思(简写) --> :
            </div>
        */ 
    const vm = new Vue({
           el: '#root',
           data: { 
               name: 'jack',
               url: 'http://.'
           }
       })

    数据绑定
       v-bing
       // 单项绑定 只能从data流向页面  
       // 简写  <input type="text" :value ="name">
       v-model
       // 双向绑定  
       // 只能应用在表单类元素中  默认收集输入框的value值
       // 简写  <input type="text" v-model="name"> (v-model:value)

    v.$mount('#root')
    // 挂载第二种写法

    const vm = new veu = {
        // data 函数式写法  使用组件时data必须用这种写法
        data:function(){
            return{
                name:'xxx'
            }
        }
    }
    
    MVVM模型
    // M (模型)： 指的是data中数据
    // v(视图)： 指的是模板
    // vm(视图模型)： Vue实例对象   
    数据代理
    // 通过一个对象代理对另一个对象中属性的操作
        ES6对象方法
        // 定义对象中新的属性或修改原有的属性
        Object.defineProperty(person, 'age', {
            // 有人读取person的age 属性时，get函数（getter）就会被调用 返回的就是age的值
            get() {
                return number;
            },
            // 当修改person的age属性时,set函数就会被调用()而且会受到修改的具体值
            set(value){
                number=value;
            }
        })
    // vm实例数据代理 VUE和data 改变参数

    事件处理
    // 使用 v-on:xxx 或者 @xxx绑定事件 xxx是事件名
       // <button @click= "showInfo2($event,66)">鼠标事件绑定</button>
        const vm = {
            el: '#root',
            data: {
                name: 'sss',
            },
            // 方法
            methods:{
                showInfo1(event){
                    // 事件
                },
                showInfo2(event,number){
                    // $event 可以传更多的参
                    console.log(点击后获取值66);
                }
            }
        }
        事件修饰符
        // 修饰符可以连续写
        // <button @click.prevent= "showInfo2($event,66)">鼠标事件绑定</button>
            preventDefault()
            /*
                .prevent  阻止默认事件（常用）
                .stop  阻止事件冒泡（常用）
                .once  事件只触发一次 （常用）
                .capture  使用事件的捕获模式
                .self  只有event.traget是当前操作元素时才触发的事件
                .passive  事件的默认行为立即执行，无需等待事件回调执行完毕
            */
        键盘事件
        //@keydown @keyup
        //<button @keyup.enter= "showInfo2(66)">键盘事件事件绑定</button>
            别名
            /*
                回车  .enter
                删除  .delete
                退出  .esc
                空格  .space
                换行  .tab   (配合keydow使用)
                上    .up
                下    .down
                左    .left
                右    .right
            */
           // 特殊 ctrl window alt shift 
              // 1.配合keyup用： 按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发 @ctrl.y
              // 2.配合keydown使用： 正常
        
    计算属性
    // <spand>{{fullname}}</spand>  注意不要写成fullname()!!!
        const vm =new Vue({
            el:'#root',
            data:{
                firstname: '冼',
                lastname: 'k',
            },
            methods: {

            },
            // 计算属性
            // 计算属性最终会出现再vm身上 直接读取即可 fullname
            computed:{
                fullname:{
                    // 当有人读取fullname时调用，返回值就作为fullname值
                    // get初次读取时调用，所依赖的数据发生变化时调用
                    get(){
                        // 里面的this指向vm
                        return this.firstname + '-' + this.lastname;
                    },
                    // 当fullname修改时调用
                    set(value){
                        const arr = value.split('-')
                        this.firstname = arr[0]
                        this.lastname = arr[1]
                    }
                }
            }
        })
        简写
        // 不需要set时
            new Vue ={
                computed: {
                    fullname(){
                        return this.firstname + '-' + this.lastname;
                    }
                }
            }
    监视属性
    // 监视某个属性的变化 一定要有这个属性才能监视
    // <button @click = ""></button> 事件绑定时可以@xxx="yyy" yyy可以写一些简单语句
        new Vue = {
            el:'',
            data:{
                isHot: true,
                numbers:{
                    a: 1,
                    b: 2
                }
            },
            methods:{},
            computed:{},
            // 监视属性
            watch:{
                isHot:{
                    //  当isHot发生变化时调用
                    handler(newValue, oldValue){
                    },
                    // 立即执行的 初始化时让handler调用一下
                    immediate: true,
                },
                // 深度监视  
                    //监视多级结构种某个属性的变化
                    'numbers.a':{
                        handler(){}
                    },
                    //监视多级结构中所有属性的变化
                    numbers:{
                        // 可以监测对象内部值的改变
                        deep: true,
                        handler(){}
                    },
            /*    简写
                // 不写deep immediate 的情况下
                isHot(){}
            */
            }
        }
        // 第二种写法
        vm.$watch('ishot', {
            handler(){
            }
        })
        /*
            简写
            vm.$watch('ishot',function(newValue,oldValue){}
        })
        */
    // watch能完成的功能，computed不一定能完成， watch能进行异步操作    
    
    绑定样式
        class样式
        // 字符串写法  适用于样式的类名不确定，需要动态指定
        // 数组写法 适用于绑定样式个数不确定，名字也不确定 
        // 对象写法 适用于绑定样式的个数确定，名字确定，动态决定要不要用

            // <div class="basic" :class="a/classArr/classObj"></div>
            new Vue = {
                el:'#root',
                data:{
                    a: 'normal', // a 为html内css样式
                    classArr:['atguigu1', 'atguigu2', 'atguigu3'],
                    calssObj: {
                        atguigu1: false,
                        atguigu2: true,
                        atguigu3: true,
                    }
                }
            }
    
    条件渲染
     // 1.v-show
        // <h2 v-show="false">sssss</h2>
            // 不展示的dom结构保留，隐藏和显示
     // 2.v-if v-else-if v-else  不能被打断
        // <h2 v-if="false">sssss</h2>
        // <h2 v-else-if="false">ccc</h2>
        // <h2 v-else>ccc</h2>   v-else 后不接判断
            // 不展示的dom直接被移除 隐藏和显示
      使用template包裹
        // 放到浏览器中会脱离这个标签  只能配合v-if
        /*
            <template v-if="n===1">
                <h2>nih</h2>
                <h2>nih</h2>
            </template>
        */
    
    列表渲染
        /*  
            v-for 遍历 persons  :key绑定id给节点标识（必要）
            <li v-for = "(p,index) in persons" :key="p.id">
                {{p.name}}--{{p.age}}
            </li>
        */
       new Vue({
           el: '#root',
           data: {
               persons:[
                   {id:'001',name:'张三',age:'18'},
                   {id:'002',name:'李四',age:'19'},
                   {id:'003',name:'王五',age:'20'},
               ]
           }
       })
       /*
        key的作用
            key是虚拟dom对象的标识，当数据发生变化时VUE会根据新数据生成【新的虚拟DOM】
            随后VUE进行【新虚拟DOM】与 【旧的虚拟DOM】的差异比较
          比较规则：
            1.旧虚拟DOM中找到了新虚拟DOM相同的key
                若DOM内容没变，直接使用之前的真实DOM
                若DOM内容改变，则生成新的真实DOM，替换掉旧的
            2.旧虚拟DOM未找到与新虚拟DOM相同的KEY
                创建新的渲染到页面
       */
       模糊搜索

    Vue.set(target, key, value)
    // vm.$set()
    // 给数据追加一个响应式的
    // 只能给data 某一个下级对象里面添加， 对象不能给vm 或 vm_data添加
    数组数据用js数组操作
    // push() pop() shift() unshift() reverse() sort() splice()
    // 不能通过数组的索引值直接赋值
    // 通过vue.set()也可以

    收集表单数据
    /* 
		若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
		若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
		若：<input type="checkbox"/>
				1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				2.配置input的value属性:
						(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
						(2)v-model的初始值是数组，那么收集的的就是value组成的数组
		备注：v-model的三个修饰符：
						lazy：失去焦点再收集数据
						number：输入字符串转为有效的数字
						trim：输入首尾空格过滤
	*/ 

    过滤器
    // 对显示数据进行特定格式化后显示  只适用于简单的逻辑处理
    // <h3> {{time | timeFormater}} </h3>
    // <h3> {{time | timeFormater('YYYY年MMMM月DD日') | myslice}} </h3>  设置限制过滤器传参  多个过滤器可串联
      局部设置// 只能局部用
        new Vue({
            el:'#root',
            data:{
                time:162156455302 // 时间戳
            },
            filters:{
                // 加工数据  dayjs下载第三方库 
                timeFormater(value, str='YYYY年MMMM月DD日 HH:mm:ss'){
                    // str 有值用h3的限制  没有值用传入的
                    return dayjs(value).format(str)
                },
                mySlice(){
                    return value.slice(0, 4)
                }
            }
        })
      全局
      // 只能一个一个的写  全局可用
        Vue.filter('mySlice', function(){
            return value.slice(0, 4)
        })

    内置指令
        /*
            v-bing   单项绑定解析表达式
            v-model  双向绑定数据
            v-for    遍历数组/对象/字符串
            v-on     绑定事件监听 @
            v-if     条件渲染
            v-else   条件渲染
            v-show   条件渲染
        */
        v-text
          // 向其所在的节点渲染文本内容   会完全替代里面内容 {{}}不会
          // <div v-text="name">你好</div>  
        v-html
          // 向指定节点中渲染包含html结构的内容  可识别html结构
          // 会替换节点中所有内容 {{}}不会
          // 有安全性问题 在动态网站上渲染任意html十分危险  容易导致xss攻击
        v-cloak
          // 没有值
          // 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性
          // 使用css结合v-cloak可以解决网速慢时页面展示{{xxx}}的问题
        v-noce
          // 没有值
          // 在节点初次动态渲染后，就视为静态内容了 以后的数据改变不会引起所在结构的更新 {{xxx}}
        v-pre
          // 跳过其所在节点的编译过程
          // 可利用它跳过： 没有使用指令语法，没有使用插值语法的节点，加快编译
    自定义指令
        创建
        new Vue({
            el:'',
            data:{},
            directives:{
                // 简写
                // big函数何时会被调用 1.指令与元素成功绑定时 2.指令所在的模板被从新解析时
                'big-number'(element, binding){   
                    // element 为元素 binding为绑定的数据
                    // 操作DOM js代码
                    element.innerText = binding.value*10
                },
                // 完整版
                fbing:{
                    // 指令与元素成功绑定时调用
                    bing(){},
                    // 指令所在元素被插入页面时调用
                    inserted(){},
                    // 指令所在模版从新解析时调用
                    update(){

                    }
                }
            }
        })  
        注意
        // 指令名有多个单词时 要用 - 分隔 不用驼峰命名法，并且创建时要用原始写法加''
        // 创建里面的 this 都指向window
        // 创建的都是VUE实例的 局部指令
        // 指令名定义时不加 v-  使用时加
        全局指令
            Vue.directive('fbind',{
                bing(){},
                inserted(){},
                update(){}
            })
            Vue.directives('big-number',function(element, binding){   
                element.innerText = binding.value*10
            },)
    
    生命周期
        /*
            1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
			2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
			3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
			4.生命周期函数中的this指向是vm 或 组件实例对象
        */
        new Vue({
            el:'',
            data:{},
            // 将要创建
            beforeCreate() {
               // 数据代理，数据监测之前
            },
            // 创建完毕
            created() {
                
            },
            // 将要挂载
            beforeMount() {
                
            },
            // 挂载完毕  重要
            mounted(){
                // Vue完成模板的解析并把把初始的真实DOM元素放入页面后 调用
                // 在此阶段开启定时器 发送网络请求 订阅消息 绑定自定义事件等初始化操作
            },
            // 将要更新数据 数据更新之前
            beforeUpdate() {
                
            },
            // 更新完毕
            updated() {
                
            },
            // 将要销毁  重要
            beforeDestroy() {
                // 在此阶段 关闭定时器，取消订阅，解绑自定义事件
            },
            // 销毁完毕
            destroyed() {
                
            },
        })

    组件化编程
        非单文件组件
        // 一个文件中包含多个组件
          创建组件
            定义组件
            const school =Vue.extend({
                // 使用组件时不特定绑定容器 el  最终听从注册的分配
                template: `
                    <div> {{schoolName}} </div>
                `,
                data(){
                    return {
                        schoolName: '尚硅谷'
                    }
                }
            })
            const student = Vue.extend({
                template: `
                    <div> {{studentName}} </div>
                `,
                data(){
                    return {
                        studentname: 'xxx'
                    }
                }
            })
            注册组件
                new Vue({
                    el:'#root',
                    // 局部注册
                    components: {
                        school:school,
                        // 此处注册组件名
                    }
                })
                // 全局注册
                Vue.component(student,student)

            使用组件
            // 在HTML内编写组件标签
            // <school> </school>  
            /*
                几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
            */
            VueComponent
                /*
                1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

						2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
							即Vue帮我们执行的：new VueComponent(options)。

						3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

						4.关于this指向：
								(1).组件配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
								(2).new Vue(options)配置中：
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

						5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
							Vue的实例对象，以后简称vm。
                */
                VueComponent.prototype.__proto__ === Vue.prototype

        单文件组件
        // 一个文件中只包含一个组件
        // 后缀为 .vue文件  下载插件vetur
            /*
                <template>
                    组件的结构  必须加一个根元素div
                </template>
                <script>
                    组件交互相关的代码
                    export default ？？？默认暴露  import ??? from ???
                    export { ???? } 统一暴露     import {????} form ????
                </script>
                <style>
                    组件的样式
                </style>
            */
           // app.vue 汇总所有的自定义组件  再用main.js引入  再放到index.html
          需要脚手架识别.vue文件
                vueCLI               
vue-cli
    readme笔记
    安装
      // 全局安装@vue/cli nmp install -g @vue/cli
    创建
      // vue creat xxx
    开启脚手架服务
      // npm run serve
    
    服务器请求用axios
        export default {
            name:'App',
            methods: {
                getStudents(){
                    axios.get('http://localhost:8080/students').then(
                        response => {
                            console.log('请求成功了',response.data)
                        },
                        error => {
                            console.log('请求失败了',error.message)
                        }
                    )
                },
            },
        }
    
    vuex
        安装
        // npm i vuex
        使用
        // main.js内  import Vuex from 'vuex'  import store from ' '
        //  store文档， 里面index.js存放store
vue-router

vue3
    
